<template>
  <div class="newaddress">
    <header>
      <van-icon name="arrow-left" @click="handleBack()" size="25"/>
      <span>新增地址</span>
    </header>

    <van-address-edit
        :area-list="areaList"
        show-postal
        show-delete
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
        @change-default="onDefault"
    />

  </div>
</template>

<script>
import { ref } from 'vue';
import { Toast } from 'vant';
import { areaList } from '@vant/area-data';
import useUserStore from '../../store/user';
import { useRouter } from 'vue-router';
import 'vant/es/toast/style';

export default {
  setup() {
    const store = useUserStore()
    const router = useRouter()
    const searchResult = ref([]);
    const onSave = (val) => {
      val.address= val.province+val.city+val.county+val.addressDetail
      store.address.push(val)
      Toast('保存成功')
      router.push('/address')
    };
    const onDefault =(checked)=>{
      console.log(checked)
    }
    const onDelete = () => Toast('delete');
    const onChangeDetail = (val) => {
      if (val) {
        searchResult.value = [
          {
            name: '肖家河大厦',
            // address: '杭州市西湖区',
          },
        ];
      } else {
        searchResult.value = [];
      }
    };

    return {
      onSave,
      onDelete,
      areaList,
      searchResult,
      onChangeDetail,
      onDefault,
    };
  },
  methods: {
      handleBack() {
        this.$router.back()
      },
    },
}
</script>

<style lang="less" scoped>
  header{
    height: 44px;
    font-size: 16px;
    line-height: 44px;
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 5px;
  }
</style>
